<template>
  <BasicModal
    :visible="visible"
    title="创建拓扑规则"
    :min-height="300"
    :height="300"
    :show-ok-btn="true"
    :show-cancel-btn="true"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form ref="form" :model="formData">
      <a-form-item label="ID" name="id" :rules="[{ required: true }]">
        <a-input v-model:value="formData.id" />
      </a-form-item>
      <a-form-item label="Description" name="desc" :rules="[{ required: true }]">
        <a-input v-model:value="formData.desc" />
      </a-form-item>
      <a-form-item label="Regex" name="regex" :rules="[{ required: true }]">
        <a-input v-model:value="formData.regex" />
      </a-form-item>
      <a-form-item label="Replacement" name="replacement" :rules="[{ required: true }]">
        <a-input v-model:value="formData.desc" />
      </a-form-item>
    </a-form>
  </BasicModal>
</template>

<script>
  import { Form, FormItem, Input } from 'ant-design-vue'
  import { BasicModal } from '/@/components/Modal'

  export default {
    components: {
      'a-input': Input,
      'a-form': Form,
      'a-form-item': FormItem,
      BasicModal,
    },
    props: {
      ruleData: Object,
      visible: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['ok', 'cancel'],
    data: function () {
      return {
        formData: {
          id: 0,
          desc: '',
          regex: '',
          replacement: '',
        },
      }
    },
    watch: {
      ruleData(newVal) {
        if (newVal) {
          this.formData.id = newVal.id
          this.formData.desc = newval.desc
          this.formData.regex = newVal.regex
          this.formData.replacement = newVal.replacement
        }
      },
    },
    methods: {
      handleCancel() {
        this.$emit('cancel')
      },
      handleOk() {
        this.$emit('ok', this.formData)
      },
    },
  }
</script>
